<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小六壬占卜 - 传统易学占卜</title>
    <link rel="stylesheet" href="style.css">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;700&display=swap" rel="stylesheet">
</head>
<body>
    <div class="container">
        <!-- 头部 -->
        <header class="header">
            <h1 class="title">小六壬占卜</h1>
            <p class="subtitle">传统易学 · 指点迷津</p>
        </header>

        <!-- 主要内容区域 -->
        <main class="main-content">
            <!-- 占卜步骤说明 -->
            <section class="instruction-section" id="instructionSection">
                <div class="instruction-card">
                    <h2>占卜方法</h2>
                    <div class="steps">
                        <div class="step">
                            <span class="step-number">1</span>
                            <p>心中默念所要占卜的事情</p>
                        </div>
                        <div class="step">
                            <span class="step-number">2</span>
                            <p>选择占卜的时间（月、日、时）</p>
                        </div>
                        <div class="step">
                            <span class="step-number">3</span>
                            <p>点击"开始占卜"按钮</p>
                        </div>
                    </div>
                </div>
            </section>

            <!-- 占卜事项输入区域 -->
            <section class="question-section" id="questionSection">
                <div class="question-card">
                    <h3>请输入您要占卜的事情</h3>
                    <div class="question-input-group">
                        <textarea 
                            id="divinationQuestion" 
                            class="question-textarea" 
                            placeholder="请在此输入您想要占卜的具体事情，例如：工作发展、感情状况、财运如何、出行是否顺利等..."
                            maxlength="200"
                            rows="4"
                        ></textarea>
                        <div class="char-count">
                            <span id="charCount">0</span>/200
                        </div>
                    </div>
                </div>
            </section>

            <!-- 时间选择区域 -->
            <section class="time-section" id="timeSection">
                <div class="time-card">
                    <h3>选择占卜时间</h3>
                    <div class="time-inputs">
                        <div class="input-group">
                            <label for="month">月份</label>
                            <select id="month" class="time-select">
                                <option value="1">正月</option>
                                <option value="2">二月</option>
                                <option value="3">三月</option>
                                <option value="4">四月</option>
                                <option value="5">五月</option>
                                <option value="6">六月</option>
                                <option value="7">七月</option>
                                <option value="8">八月</option>
                                <option value="9">九月</option>
                                <option value="10">十月</option>
                                <option value="11">十一月</option>
                                <option value="12">十二月</option>
                            </select>
                        </div>
                        <div class="input-group">
                            <label for="day">日期</label>
                            <select id="day" class="time-select">
                                <!-- 动态生成1-30日 -->
                            </select>
                        </div>
                        <div class="input-group">
                            <label for="hour">时辰</label>
                            <select id="hour" class="time-select">
                                <option value="1">子时 (23-01)</option>
                                <option value="2">丑时 (01-03)</option>
                                <option value="3">寅时 (03-05)</option>
                                <option value="4">卯时 (05-07)</option>
                                <option value="5">辰时 (07-09)</option>
                                <option value="6">巳时 (09-11)</option>
                                <option value="7">午时 (11-13)</option>
                                <option value="8">未时 (13-15)</option>
                                <option value="9">申时 (15-17)</option>
                                <option value="10">酉时 (17-19)</option>
                                <option value="11">戌时 (19-21)</option>
                                <option value="12">亥时 (21-23)</option>
                            </select>
                        </div>
                    </div>
                    <button class="divination-btn" id="startDivination">开始占卜</button>
                </div>
            </section>

            <!-- 占卜过程动画 -->
            <section class="divination-process" id="divinationProcess" style="display: none;">
                <div class="process-card">
                    <h3>正在占卜中...</h3>
                    <div class="progress-bar">
                        <div class="progress-fill" id="progressFill"></div>
                    </div>
                    <div class="liuren-circle">
                        <div class="palace" data-palace="大安">大安</div>
                        <div class="palace" data-palace="留连">留连</div>
                        <div class="palace" data-palace="速喜">速喜</div>
                        <div class="palace" data-palace="赤口">赤口</div>
                        <div class="palace" data-palace="小吉">小吉</div>
                        <div class="palace" data-palace="空亡">空亡</div>
                        <div class="center-dot"></div>
                    </div>
                    <div class="calculation-steps" id="calculationSteps">
                        <div class="step-info">
                            <span class="step-label">第一步：</span>
                            <span class="step-desc" id="step1"></span>
                        </div>
                        <div class="step-info">
                            <span class="step-label">第二步：</span>
                            <span class="step-desc" id="step2"></span>
                        </div>
                        <div class="step-info">
                            <span class="step-label">第三步：</span>
                            <span class="step-desc" id="step3"></span>
                        </div>
                    </div>
                </div>
            </section>

            <!-- 占卜结果 -->
            <section class="result-section" id="resultSection" style="display: none;">
                <div class="result-card">
                    <div class="result-header">
                        <h3>🔮 占卜结果</h3>
                        <div class="result-time" id="resultTime"></div>
                    </div>
                    
                    <div class="result-palace">
                        <div class="palace-name" id="resultPalace"></div>
                        <div class="palace-meaning" id="palaceMeaning"></div>
                        <div class="divination-question">
                            <h5>📝 占卜问题</h5>
                            <div class="question-display" id="questionDisplay"></div>
                        </div>
                    </div>
                    
                    <div class="result-interpretation">
                        <h4>📖 详细解释</h4>
                        <div class="interpretation-content" id="interpretationContent"></div>
                    </div>
                    
                    <div class="result-advice">
                        <h4>💡 专属建议</h4>
                        <div class="advice-content" id="adviceContent"></div>
                    </div>
                    
                    <div class="fortune-details" id="fortuneDetails">
                        <h4>🌟 运势详解</h4>
                        <div class="fortune-grid">
                            <div class="fortune-item">
                                <div class="fortune-icon">💼</div>
                                <div class="fortune-label">事业运</div>
                                <div class="fortune-text" id="careerFortune"></div>
                            </div>
                            <div class="fortune-item">
                                <div class="fortune-icon">💕</div>
                                <div class="fortune-label">感情运</div>
                                <div class="fortune-text" id="loveFortune"></div>
                            </div>
                            <div class="fortune-item">
                                <div class="fortune-icon">💰</div>
                                <div class="fortune-label">财运</div>
                                <div class="fortune-text" id="wealthFortune"></div>
                            </div>
                            <div class="fortune-item">
                                <div class="fortune-icon">🏥</div>
                                <div class="fortune-label">健康运</div>
                                <div class="fortune-text" id="healthFortune"></div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="result-actions">
                        <button class="restart-btn" id="restartBtn">🔄 重新占卜</button>
                        <button class="share-btn" id="shareBtn">📤 分享结果</button>
                    </div>
                </div>
            </section>
        </main>

        <!-- 底部信息 -->
        <footer class="footer">
            <p>小六壬占卜仅供娱乐参考，请理性对待</p>
        </footer>
    </div>

    <script src="script.js"></script>
</body>
</html>